<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试DIV</title>
	</head>
	<body>
		<!-- 
		<div style="width:100%">
		表示让这个DIV的宽度为百分之百显示，这取决于父级的宽度。
		如果父级为body，那么这个div就是跟浏览器的宽度相同。
		如果父级为其他的DIV并且父级DIV有宽度，比如父级的DIV是500PX，那这时的div宽度就是500px。
		style是样式表的意思，里面的width是宽度，宽度可以使用百分比，也可以用PX（像素）来表示。 
		https://blog.csdn.net/chengzhangbiji/article/details/42462631
		注意：Html级元素默认宽度是100%；但是高度并不是100%，而仅仅是一行而已。
		-->
		<div style="width:100%;height: 100%;background-color: bisque;">
			<!-- 第一行展示，两个div各占一半空间 -->
			<div>
				<div style="float: left;width: 50%;">
					商品名称1：<input id="searchUserId1">
				</div>
				<div style="float: left;width: 50%;">
					商品类型1：<input id="searchProductInfoId1">
				</div>
			</div>
			<!-- 第二行展示 ，两个div是3:7-->
			<div>
				<div style="float: left;width: 30%;">
					商品名称2：<input id="searchUserId1">
				</div>
				<div style="float: left;width: 70%;">
					商品类型2：<input id="searchProductInfoId1">
				</div>
			</div>
			<!-- 第三行展示，两个div是7:3 -->
			<div>
				<div style="float: left;width: 70%;">
					商品名称3：<input id="searchUserId1">
				</div>
				<div style="float: left;width: 30%;">
					商品类型3：<input id="searchProductInfoId1">
				</div>
			</div>
			<!-- 第四行展示，两个div各占一半，但第2个div是右对齐 -->
			<div>
				<div style="float: left;width: 50%;margin-top: 0.5%;">
					商品名称4：<input id="searchUserId2">
				</div>
				<div style="float: left;width: 50%;text-align: right;margin-top: 0.5%;">
					商品类型4：<input id="searchProductInfoId2">
				</div>
			</div>
			<!-- 第五行展示，增加了margin-top属性 -->
			<div>
				<div style="float: left;width: 100%;margin-top: 0.5%">
					时间范围5：<input id="searchStartTime">- <input id="searchEndTime">
					<div style="float: right;width: 50%;text-align: right;">
						商品类型5：<input id="searchUserType">
					</div>
				</div>
			</div>
			<!-- 第六行展示，增加了margin-top属性 -->
			<div>
				<div style="float: left;width: 100%;margin-top: 0.5%">
					时间范围6：<input id="searchStartTime">- <input id="searchEndTime">
					<div style="float: right;width: 50%;text-align: right;">
						商品类型6：<input id="searchUserType">
					</div>
				</div>
			</div>
			<!-- 第七行展示，注意 margin-right: 4%-->
			<div>
				<div style="float: right;margin-top: 0.5%;width: 100%;text-align: right;margin-right: 4%;">
					<button type="button">
						搜索
					</button>
					<button type="button">
						导出
					</button>
				</div>
			</div>
			<!-- 第八行展示，注意没有 margin-right: 4%-->
			<div>
				<div style="float: right;margin-top: 0.5%;width: 100%;text-align: right;">
					<button type="button">
						搜索
					</button>
					<button type="button">
						导出
					</button>
				</div>
			</div>

			<!-- 第九行展示，注意 margin-right: 0%-->
			<div>
				<div style="float: left;width: 100%;margin-top: 0.5%">
					<button type="button">
						搜索
					</button>
					<button type="button">
						导出
					</button>
				</div>
			</div>

			<!-- 第十行展示，注意 float: left-->
			<div>
				<div style="float: left;width: 100%;margin-top: 0.5%;margin-left: 4%;">
					<button type="button">
						搜索
					</button>
					<button type="button">
						导出
					</button>
				</div>
			</div>
		</div>

	</body>
</html>

<style type="text/css">
	html {
		height: 100%;
		margin: 0;
	}

	body {
		height: 100%;
		margin: 0;
	}
</style>
